<template>
 <div class="commentBox">
        <h3>评论</h3>
        <p id="empty"v-if="comment.length==0">暂无评论，我来发表第一篇评论！</p>
        <div v-else>
            <div class="comment" v-for="(item,index) in comment" v-bind:index="index" >
              <div v-if="item.type==2">
                <b><img :src="item.header_image" width="40"alt="" />{{item.user_name}}&nbsp;&nbsp;回复&nbsp;&nbsp;<img :src="item.to_header_image" width="40"alt="" />{{item.to_nickname}}&nbsp;&nbsp;<span>{{item.create_time}}</span></b>
              </div>
                <div v-else>
                <b><img v-lazy="item.header_image" width="40"alt="" />{{item.user_name}}<span>{{item.create_time}}</span></b>
                </div>
                <p >{{item.comment}}</p>
                <button @click="changeCommenter(item.user_name,index,item.header_image)">回复</button>
                <!-- <div v-if="item.reply.length > 0">
                    <div class="reply" v-for="reply in item.reply">
                        <b>{{reply.responder}}&nbsp;&nbsp;回复&nbsp;&nbsp;{{reply.reviewers}}<span>{{reply.time}}</span></b>
                        <p @click="changeCommenter(reply.responder,index)">{{reply.content}}</p>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</template>
<script>
export default {
  props: {
    comment: ''
  },
  methods: {
    changeCommenter (name, index, headimg) {
      this.$emit('change', name, index, headimg)
    }
  }
}
</script>


<style lang="stylus" rel="stylesheet/stylus" >
.commentBox
  h3
    color: #634322;
    background: #e9e5df
    padding: 8px 15px
    text-align: left
    font-size: 16px
  #empty
    padding:5px;
  div
    .comment
      border-top:1px solid #ccc
      padding: 10px 0
      b
        padding:5px
        color:#01553D
        font-size: 14px;
      p
        padding:5px
      button
        padding:5px 20px
        background:#01553D
        border-radius:5px
        color:#fff
        font-size:16px
      .reply
        b
          color:#01553D
          font-size:16px
          display:block
          margin:5px 0
          span
          color:#333
          font-size:14px
          margin-left:20px
        p
          font-size:16px
          color:#333
</style>
